<template>
  <div class="addInvoicingDialogPage">
    <el-dialog
        v-model="dialogVisible"
        title="修改开票信息"
        width="45%"
        :before-close="handleClose"
        custom-class="custom-dialog"
    >
      <div class="content">
        <el-form
            :inline="true"
            label-width="120px"
            ref="ruleFormRef"
            :model="ruleForm"
            :rules="rules"
            class="form-inline">
          <el-form-item label="发票抬头" prop="invoiceHeader">
            <el-input v-model="ruleForm.invoiceHeader" placeholder="请输入发票抬头"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="invoiceAddress">
            <el-input v-model="ruleForm.invoiceAddress" placeholder="请输入地址"></el-input>
          </el-form-item>
          <el-form-item label="税号" prop="dutyParagraph">
            <el-input v-model="ruleForm.dutyParagraph" placeholder="请输入税号"></el-input>
          </el-form-item>
          <el-form-item label="电话" prop="invoicePhone">
            <el-input v-model="ruleForm.invoicePhone" placeholder="请输入电话"></el-input>
          </el-form-item>
          <el-form-item label="开户银行" prop="openingBank">
            <el-input v-model="ruleForm.openingBank" placeholder="请输入开户银行"></el-input>
          </el-form-item>
          <el-form-item label="银行账户" prop="bankAccount">
            <el-input v-model="ruleForm.bankAccount" placeholder="请输入银行账户"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
      <span class="dialog-footer d-flex j-center">
        <el-button @click="dialogVisible = false" class="button_cancel2">取消</el-button>
        <el-button type="primary" class="button_view" @click="onConfirm">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import {ref,reactive,watch} from "vue";
import {ElDialog,ElForm,ElFormItem,ElInput,ElMessage} from "element-plus";
import {leaseApi} from "@/api/lease";

const props = defineProps({
  visible:{
    type:Boolean,
    default:false
  },
  form:{
    type:Object,
    default: {}
  }
});

const ruleForm = reactive({
  invoicingInformationId:'',
  invoiceHeader:'',
  invoiceAddress:'',
  dutyParagraph:'',
  invoicePhone:'',
  openingBank:'',
  bankAccount:'',
  businessId:'',
});
const rules = reactive({
  invoiceHeader: [
    { required: true, message: '请输入发票抬头', trigger: 'blur' }
  ],
  invoiceAddress: [
    { required: true, message: '请输入地址', trigger: 'blur' }
  ],
  dutyParagraph: [
    { required: true, message: '请输入税号', trigger: 'blur' }
  ],
  invoicePhone: [
    { required: true, message: '请输入电话', trigger: 'blur' }
  ],
  openingBank: [
    { required: true, message: '请输入开户行', trigger: 'blur' }
  ],
  bankAccount: [
    { required: true, message: '请输入银行账户', trigger: 'blur' }
  ],
});

let emits = defineEmits(['update:visible','onConfirm'])
const dialogVisible = ref(props.visible);

const handleClose = () => {
  // 需要修改父组件的数据
  emits('update:visible',false);
}

// 监听visible的变化 只能监听第一次的变化
watch(()=> props.visible, value => {
  dialogVisible.value = value;
})

// 监听组件内部的dialogVisible变化
watch(() => dialogVisible.value, value => {
  emits('update:visible', value)
})

watch(()=>props.form,value=>{
  if(JSON.stringify(value)!=='{}'){
    for (let key in value){
      for(let k in  ruleForm){
        if(key === k){
          ruleForm[k] = value[key];
        }
      }
    }
  }
});

const ruleFormRef = ref(null);
// 确认
const onConfirm = () => {
  ruleFormRef.value.validate((valid, fields)=>{
    if (valid) {
      leaseApi.saveInvoicingInfo(ruleForm).then(res=>{
        if(res.code == 200){
          ElMessage.success('操作成功!');
          dialogVisible.value = false;
          emits('onConfirm');
        }
      });
    } else {
      console.log('error submit!', fields)
    }
  });
}
</script>

<style>
.custom-dialog .el-dialog__header{
    display: flex;
    justify-content: center;
}
</style>

<style lang="scss" scoped>
.addInvoicingDialogPage{

}
</style>
